ext实现预览组件

背景

由于拓扑图中设备详情弹窗使用的是抽屉式的，不可能做的很宽，所以端口面板这种本来就很宽的组件就只能通过缩放来显示，这就导致了面板很小，基本看不清效果。

预览组件

所以通过在页面底层上增加个预览组件的组件，来实现放大显示的功能。

动态创建、删除

在底层页面类中加入以下函数，使得各页面均可通过调用来创建预览组件。

addPreviewComponent: function (getCustomItems, afterLayout) {
	this.previewComponent = new SFX.plugins.PreviewComponent({
		getCustomItems,
		afterLayoutCb: afterLayout,
		close: this.removePreviewComponent.bind(this)
	});
	this.container.add(this.previewComponent);
	this.container.doLayout();
},

getCustomItems

返回Ext中的items数组即可（即需要展示的组件）

afterLayout

渲染完的回调，用于做数据的处理等。

使用

通过当前页面的实例去调用addPreviewComponent

_thisForm.panelMgr.page.addPreviewComponent(
    function () {
        return [
            this.portsPanel = _thisForm.createPortsPanelPanel()
        ];
    },
    function () {
        this.portsPanel.on("action", _thisForm.portsMgr.preProcessAct, _thisForm.portsMgr);
        _thisForm.updatePortPanelData(this.portsPanel, false);
        // 切换为当前选中的模式
        this.portsPanel.statusModeChange(_thisForm.switchMenu.getJsonValue());
    }
)

传入对应的参数即可实现效果

关闭预览

在页面底层类中添加了关闭功能，通过页面实例调用即可删除该预览组件

removePreviewComponent: function () {
	this.previewComponent && this.container.remove(this.previewComponent);
},